<template>
  <card title="修改项目信息" width="600px">
    <div class="content-wrapper">
      <el-tabs v-model="activeName" type="card" @tab-click="tabChange">
        <el-tab-pane label="基本信息" name="project">
          <!-- 基本信息 -->
          <el-form v-model="projectForm">
            <el-form-item label="项目名称">
              <el-input v-model="projectForm.name" />
            </el-form-item>
            <el-form-item label="项目描述">
              <el-input v-model="projectForm.desc" />
            </el-form-item>
            <div class="flex justify-center align-center">
              <el-button type="primary" class="w-100" @click="determine">确定</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="成员管理" name="team">成员管理(2期)</el-tab-pane>
        <el-tab-pane label="高级设置" name="other">
          <div class="btns flex justify-center align-center">
            <el-button class="w-100" type="info">锁定</el-button>
            <el-button class="w-100" type="warning">转让</el-button>
            <el-button class="w-100" type="danger">删除</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </card>
</template>

<script>
import { modify_projects } from "../../api/projects";
export default {
  name: "projectSettings",
  data: () => ({
    activeName: "project",
    projectForm: {
      name: "",
      desc: "",
    },
  }),
  mounted() {},
  methods: {
    tabChange(e) {
      console.info(e);
    },
    async determine() {
      let id = this.$route.params.projectid;
      console.log(id);
      let res = await modify_projects(id, this.projectForm);
      if (res.status !== 200) {
        this.$message.error(res.msg);
        return;
      }
      this.$message.success(res.msg);
      this.$router.push({ name: "projects" });
    },
  },
};
</script>

<style lang="scss" scoped>
.content-wrapper {
  height: 300px;
  .btns {
    flex-flow: column;
    .w-100 {
      margin: 20px 0;
    }
  }
}
</style>
